<template>
  <el-form label-width="80px" :model="businessObject">
    <el-collapse v-model="isCollapse">
      <el-collapse-item name="1">
        <template #title>
          <div class="w-full h-12 pl-2.5">
            <span>基础信息</span>
          </div>
        </template>
        <div class="w-full border-t p-2.5">
          <el-form-item label="节点ID" prop="name">
            <el-input disabled v-model="businessObject.id" />
          </el-form-item>
          <el-form-item label="节点名称" prop="name">
            <el-input placeholder="请输入节点名称" v-model="businessObject.name" />
          </el-form-item>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <div class="w-full h-12 pl-2.5">
            <span>条件表达式</span>
          </div>
        </template>
        <div class="w-full border-t p-2.5">
          <el-form-item label="表达式" prop="name">
            <el-input placeholder="请输入表达式" v-model="businessObject._conditionExpression" />
          </el-form-item>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {NodeProperty} from "/@/views/flow/design/ts/FlowEventModel";
const isCollapse = ref(["1",'2'])
const businessObject = reactive<NodeProperty>({
  name: '',
  id: '',
  _conditionExpression: ''
})
const callback = ref()
const formRef = ref()
const renderPanel = (businessObjectValue: NodeProperty,callbackValue: Function) => {
  callback.value = callbackValue
  businessObject.name = businessObjectValue.name || ''
  businessObject.id = businessObjectValue.id || ''
  if(businessObjectValue.conditionExpression){
    businessObject._conditionExpression = businessObjectValue.conditionExpression.body || ''
  }else{
    businessObject._conditionExpression = ''
  }

}
watch(() => businessObject, (newValue: any) => {
  let obj = {} as any

  for (let newValueKey in newValue) {
    if('name' === newValueKey || newValueKey.startsWith("_")){
      obj[newValueKey] = newValue[newValueKey]
    }else{
      obj['camunda:' + newValueKey] = newValue[newValueKey] || ''
    }
  }
  callback.value.call(undefined,obj)
}, {deep: true})

defineExpose({ renderPanel})
</script>

<style scoped>

</style>